<template>
    <div class="message">
        <el-popover placement="bottom" :width="310" trigger="click">
            <template #reference>
                <el-badge :value="notifyNum" class="item">
					<i :class="'iconfont icon-xiaoxi'" class="toolBar-icon"></i>
				</el-badge>
            </template>
            <el-tabs v-model="activeName">
                <el-tab-pane :label="firstLabel" name="first">
                    <div class="message-list">
                        <div class="message-item" v-for="(item,index) in firstArr" :key="index">
                            <img :src="item.img" alt="" class="message-icon" />
                            <div class="message-content">
                                <span class="message-title">{{item.title}}</span>
                                <span class="message-datetime">{{item.datetime}}</span>
                            </div>
                        </div>
                        <div class="message-empty" v-if="firstArr.length === 0">
                            <img :src="noData" alt="notData" />
						    <div>暂无消息</div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="secondLabel" name="second">
                    <div class="message-list">
                        <div class="message-item" v-for="(item,index) in secondArr" :key="index">
                            <img :src="item.img" alt="" class="message-icon" />
                            <div class="message-content">
                                <span class="message-title">{{item.title}}</span>
                                <span class="message-datetime">{{item.datetime}}</span>
                            </div>
                        </div>
                        <div class="message-empty" v-if="secondArr.length === 0">
                            <img :src="noData" alt="notData" />
						    <div>暂无消息</div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane :label="thirdLabel" name="third">
                    <div class="message-list">
                        <div class="message-item" v-for="(item,index) in thirdArr" :key="index">
                            <img :src="item.img" alt="" class="message-icon" />
                            <div class="message-content">
                                <span class="message-title">{{item.title}}</span>
                                <span class="message-datetime">{{item.datetime}}</span>
                            </div>
                        </div>
                        <div class="message-empty" v-if="thirdArr.length === 0">
                            <img :src="noData" alt="notData" />
						    <div>暂无消息</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-popover>
    </div>
</template>
<script setup>
import { computed, ref,  } from "@vue/runtime-core"
import msg01 from '@/assets/images/msg01.png'
import msg02 from '@/assets/images/msg02.png'
import msg03 from '@/assets/images/msg03.png'
import msg04 from '@/assets/images/msg04.png'
import msg05 from '@/assets/images/msg05.png'
import noData from '@/assets/images/notData.png' 
const notifyNum = ref(5)

const firstNum = ref(5)
const secondNum = ref(0)
const thirdNum = ref(0)

// 数组： 图片+ title + datetime
const firstArr = ref([
    {img: msg01, title: '一键三连', datetime: '一分钟前'},
    {img: msg02, title: '一键三连', datetime: '一分钟前'},
    {img: msg03, title: '一键三连', datetime: '一分钟前'},
    {img: msg04, title: '一键三连', datetime: '一分钟前'},
    {img: msg05, title: '一键三连', datetime: '一分钟前'}
])
const secondArr = ref([])
const thirdArr = ref([])

const activeName = ref('first')
const firstLabel = computed(() => {
    return `通知(` + firstNum.value + `)`
})
const secondLabel = computed(() => {
    return `消息(` + secondNum.value + `)`
})
const thirdLabel = computed(() => {
    return `待办(` + thirdNum.value + `)`
})
</script>
<style lang="scss" scoped>
    .message-list{
        display: flex;
        flex-direction: column;
        .message-item{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #414243;
            &:last-child {
                border: none;
            }
            .message-icon {
                width: 20px;
                height: 20px;
                margin: 0 10px 0 30px;
            }
            .message-content {
                display: flex;
                .message-title {
                    margin: 0 20px 0 10px;
                }
                .message-datetime {
                    margin: 0 20px 0 10px;
                    font-size: 12px;
                    color: #414243;
                }
            }
        }
        .message-empty{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 260px;
            line-height: 45px;
        }
    }
</style>